<template>
  <view class="feedback-page">
    <view class="feedback-container">
      <view class="feedback-form">
        <view class="form-section">
          <view class="section-title">反馈类型</view>
          <view class="feedback-types">
            <view 
              v-for="type in feedbackTypes" 
              :key="type.value"
              class="type-item"
              :class="{ active: selectedType === type.value }"
              @click="selectedType = type.value"
            >
              <u-icon :name="type.icon" size="16" :color="selectedType === type.value ? '#4A90E2' : '#999'" />
              <text class="type-text">{{ type.label }}</text>
            </view>
          </view>
        </view>

        <view class="form-section">
          <view class="section-title">详细描述</view>
          <textarea
            v-model="feedbackContent"
            class="feedback-textarea"
            placeholder="请详细描述您遇到的问题或建议，我们会认真对待每一条反馈..."
            maxlength="500"
            :show-count="true"
          />
        </view>

        <view class="form-section">
          <view class="section-title">联系方式（选填）</view>
          <input
            v-model="contactInfo"
            class="contact-input"
            placeholder="请留下您的手机号或邮箱，方便我们与您联系"
            maxlength="50"
          />
        </view>

        <view class="form-section">
          <view class="section-title">上传图片（选填）</view>
          <view class="image-upload">
            <view 
              v-for="(image, index) in uploadedImages" 
              :key="index"
              class="image-item"
            >
              <image :src="image" class="uploaded-image" mode="aspectFill" />
              <view class="image-delete" @click="removeImage(index)">
                <u-icon name="close" size="12" color="#fff" />
              </view>
            </view>
            <view 
              v-if="uploadedImages.length < 3"
              class="upload-btn"
              @click="chooseImage"
            >
              <u-icon name="plus" size="20" color="#999" />
              <text class="upload-text">添加图片</text>
            </view>
          </view>
          <view class="upload-tip">最多上传3张图片，每张不超过5MB</view>
        </view>
      </view>

      <view class="submit-section">
        <u-button 
          type="primary" 
          size="large" 
          :loading="submitting"
          @click="submitFeedback"
          :disabled="!canSubmit"
        >
          提交反馈
        </u-button>
      </view>
    </view>

    <!-- 提交成功弹窗 -->
    <u-popup v-model="showSuccessModal" mode="center" border-radius="20">
      <view class="success-modal">
        <view class="success-icon">
          <u-icon name="checkmark-circle-fill" size="60" color="#52c41a" />
        </view>
        <view class="success-title">反馈提交成功</view>
        <view class="success-content">
          感谢您的反馈，我们会尽快处理并回复您。
        </view>
        <u-button type="primary" @click="goBack" size="large">
          返回
        </u-button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import apiService from '@/api'

export default {
  data() {
    return {
      selectedType: 'bug',
      feedbackContent: '',
      contactInfo: '',
      uploadedImages: [],
      submitting: false,
      showSuccessModal: false,
      
      feedbackTypes: [
        { value: 'bug', label: '功能异常', icon: 'error-circle' },
        { value: 'suggestion', label: '功能建议', icon: 'star' },
        { value: 'service', label: '服务问题', icon: 'question-circle' },
        { value: 'other', label: '其他问题', icon: 'chat' }
      ]
    }
  },
  
  computed: {
    canSubmit() {
      return this.feedbackContent.trim().length >= 10
    }
  },
  
  onLoad() {
    uni.setNavigationBarTitle({
      title: '意见反馈'
    })
  },
  
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 3 - this.uploadedImages.length,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.uploadedImages.push(...res.tempFilePaths)
        }
      })
    },
    
    removeImage(index) {
      this.uploadedImages.splice(index, 1)
    },
    
    async submitFeedback() {
      if (!this.canSubmit) {
        uni.showToast({
          title: '请至少输入10个字符的反馈内容',
          icon: 'none'
        })
        return
      }
      
      try {
        this.submitting = true
        
        // 模拟提交反馈
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 实际项目中这里应该调用API
        // await apiService.feedback.submit({
        //   type: this.selectedType,
        //   content: this.feedbackContent,
        //   contact: this.contactInfo,
        //   images: this.uploadedImages
        // })
        
        this.showSuccessModal = true
        
      } catch (error) {
        console.error('提交反馈失败:', error)
        uni.showToast({
          title: error.message || '提交失败，请重试',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    },
    
    goBack() {
      this.showSuccessModal = false
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.feedback-container {
  padding: 32rpx;
}

.feedback-form {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.form-section {
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.feedback-types {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.type-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx 24rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  background: #fafafa;
  transition: all 0.3s;
  
  &.active {
    border-color: #4A90E2;
    background: #f0f7ff;
  }
}

.type-text {
  font-size: 28rpx;
  color: #666;
}

.feedback-textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 24rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  line-height: 1.5;
  background: #fafafa;
}

.contact-input {
  width: 100%;
  height: 88rpx;
  padding: 0 24rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 8rpx;
  font-size: 28rpx;
  background: #fafafa;
}

.image-upload {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.image-item {
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.image-delete {
  position: absolute;
  top: -8rpx;
  right: -8rpx;
  width: 32rpx;
  height: 32rpx;
  background: #ff4d4f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160rpx;
  height: 160rpx;
  border: 1rpx dashed #d9d9d9;
  border-radius: 8rpx;
  background: #fafafa;
  gap: 8rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 16rpx;
}

.submit-section {
  margin-top: 32rpx;
}

.success-modal {
  width: 560rpx;
  padding: 60rpx 40rpx;
  text-align: center;
}

.success-icon {
  margin-bottom: 32rpx;
}

.success-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.success-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
  margin-bottom: 40rpx;
}
</style>